<template>
  <div class='page index-page'>
    <div class="index-handle">
      <div class="handle-item" @click="doMini">
        <img src="../../assets/imgs/home/icon_min.png" />
      </div>
      <div class="handle-item" @click="doFullScreen">
        <img src="../../assets/imgs/home/icon_screen.png" />
      </div>
      <div class="handle-item" @click="doClose">
        <img src="../../assets/imgs/home/icon_close.png" />
      </div>
    </div>
    <div class='index-main'>
      <div class="main-item main-item-left">
        <img @click='gotoPage(1)' src='../../assets/imgs/home/left.png' />
      </div>
      <div class="main-item main-item-right">
        <img @click='gotoPage(2)' src='../../assets/imgs/home/right.png' />
      </div>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
export default {
  name: 'indexPage',
  data () {
    return {

    }
  },
  methods: {
    // 全屏非全屏
    doFullScreen () {
      ipcRenderer.send('master-maximize')
    },
    // 关闭应用
    doClose () {
      ipcRenderer.send('master-before-close')
    },
    // 最小化
    doMini () {
      ipcRenderer.send('master-mini')
    },
    // 页面跳转
    gotoPage (bookId) {
      this.$router.push({
        path: '/preview',
        query: {
          bookId,
          currentPagesNum: 0
        }
      })
    }
  },
  mounted () {
  }
};
</script>

<style lang="scss">
.index-page {
  background-image: url("../../assets/imgs/home/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: relative;
}
.index-handle {
  display: flex;
  justify-content: flex-end;
  padding-top: 2%;
  height: 26%;
  .handle-item {
    margin: 0 1%;
    width: 4%;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
    img:hover {
      width: 110%;
    }
  }
}
.index-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  padding: 0 2%;
  .main-item {
    width: 35%;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  // .main-item-left{
  //   padding: 1% 0;
  // }
  .main-item-right {
    width: 30%;
  }
  .main-item-left:hover {
    width: 36%;
  }
  .main-item-right:hover {
    width: 32%;
  }
}
</style>
